import { Button, Form, ImageUploader, Input, NavBar } from "antd-mobile";
import React, { useEffect, useState } from "react";
//@ts-ignore
import { useNavigate } from "umi";
//@ts-ignore
import { getUserAvatar, putUserInfo } from "@/api";
import { defaultImg } from "../../utils/tools";
import "./index.scss";
import axios from "axios";
interface UserInfo {
  id?: number;
  name?: string;
  nickname?: string;
  password?: string;
  email?: string;
  address?: string;
  avatar?: string;
  age?: number;
}
interface valueType {
  nickname?: string;
  age?: string;
  address?: string;
}
function index() {
  const navigate = useNavigate();
  // 用户原有信息
  const [userInfo, setUserInfo] = useState<UserInfo>();
  const [fileList, setFileList] = useState<any>([
    {
      url: userInfo?.avatar ? userInfo?.avatar : defaultImg(""),
    },
  ]);

  // 表单回显熟悉
  const [form] = Form.useForm();
  // 用户最开始的信息
  // 处理接口数据
  function FormatUserInfo(userInfo: UserInfo): UserInfo {
    userInfo.address = userInfo.address || "";
    userInfo.avatar = userInfo.avatar || "";
    userInfo.age = userInfo.age || 0;
    return userInfo;
  }
  const getUserInfo = async () => {
    const res = await axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        token: localStorage.getItem("token"),
      },
      method: "get",
      url: `http://43.139.124.13:8888/user/${localStorage.getItem("userId")}`,
    });
    setFileList([{ url: res.data.data.avatar }]);
    setUserInfo(res.data.data);
    // 处理一下接口中的数据
    const list: UserInfo = res.data.data;
    FormatUserInfo(list);
    console.log(list);

    form.setFieldsValue(list);
  };

  const mockUpload = async (file: File) => {
    const form = new FormData();
    form.append("file", file);
    const res = await getUserAvatar(form);
    console.log(res);
    setFileList([{ url: res.data.msg }]);
    return {
      url: res.data.msg,
    };
  };

  const back = () => navigate("/login");
  const onFinish = async (value: valueType) => {
    const avatar = fileList[0]?.msg;
    const postValue = {
      ...value,
      avatar,
      email: userInfo?.email,
      id: userInfo?.id,
    };
    const res = await putUserInfo(postValue);
    console.log(postValue);
  };
  // 进入页面后先调用一次用户原有数据
  useEffect(() => {
    getUserInfo();
  }, []);

  return (
    <div>
      <NavBar onBack={back}>修改信息</NavBar>
      <Form form={form} layout="horizontal" onFinish={onFinish}>
        {/* 用户头像 */}
        <Form.Item name={"avatar"}>
          <div className="userImg">
            <ImageUploader
              maxCount={1}
              value={fileList}
              onChange={setFileList}
              upload={mockUpload}
            ></ImageUploader>
          </div>
        </Form.Item>
        {/* 用户昵称 */}
        <Form.Item name={"nickname" || ""} label="昵称">
          <Input placeholder="请输入昵称" />
        </Form.Item>
        {/* 用户年龄 */}
        <Form.Item name={"age" || ""} label="年龄">
          <Input placeholder="请输入年龄" />
        </Form.Item>
        {/* 用户地址 */}
        <Form.Item
          name="address"
          label="地址"
          rules={[{ required: true, message: "地址不能为空" }]}
        >
          <Input placeholder="请输入地址" />
        </Form.Item>
        <Form.Item className="button">
          <Button block type="submit" color="danger" size="large">
            修改
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default index;
